/* 
  * 返回顶部按钮
  1. 当滚动条滚动到一定的距离的时候，显示返回顶部按钮；（监听事件总线上的 mainScroll 事件）
  2. 当点击的时候，向事件总线抛出一个事件，表示跳转滚动条的位置；
 */

<template>
  <div @click="toTop" v-show="isShow" class="ToTop-content">Top</div>
</template>

<script>
export default {
  data() {
    return {
      isShow: false,
    };
  },
  created() {
    this.$bus.$on("mainScroll", this.handleScroll);
  },
  beforeDestroy() {
    this.$bus.$off("mainScroll", this.handleScroll);
  },
  methods: {
    handleScroll(dom) {
      if (!dom) {
        this.isShow = false;
        return;
      }
      let top = dom.scrollTop;
      let boundary = dom.clientHeight + 100;
      this.isShow = top > boundary;
    },
    toTop() {
      this.$bus.$emit("toTop", 0);
    },
  },
};
</script>

<style scoped lang="less">
@import url(~@/style/var.less);
.ToTop-content {
  position: fixed;
  right: 30px;
  bottom: 30px;
  width: 80px;
  height: 80px;
  text-align: center;
  line-height: 80px;
  font-size: 20px;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  border-radius: 50%;
  background-color: @primary;
}
</style>